说到vue的数据绑定的实现,很多文章都介绍defineProperty,observer,watcher,compiler,一堆抽象的概念,顿时让人失去了探究的欲望。我今个儿就来个通俗易懂的,能帮助到大家理解最好,写的不好也敬请指正。
比喻
想要理解一些抽象事物,咱必须得将其具体化,比喻就起到了很大的作用。说白了,你想象一个医院,里面有病房,病房有床位,床位上有病人,病人会有护士看护。
病房
这里vue里面的data就相当于一个大病房,大病房里可能还有小病房,病房就是一个对象,病人就是每一个属性。
护士与关联
defineProperty就是一个负责将每个病人和看顾他的护士关联起来的手段(假设每个病人都有一个对应的护士),这样通过护士对病人的观测,就可以知道病人的病情。
但是我们要做的是具体到每一个病人的关联,但是data里还含有一些小病房,所以我们要使用observer,对data这个病房里的病人进行一个流程化的关联,使用递归,确保每个小病房里的病人也会关联到看顾的护士,而不是整个小病房。
那么,到这边,假设我们已经关联完了。这时候,你会发现,光有小护士好像没有什么用啊,她只能反应病人病情的每一次变化,但是可能她记性不太好,忘了病人上次的病情是什么样子了。这时我们需要一个病情的记录与对比者。当进行关联时先记录病人的初始病情,这就是我们说的watcher.
医生
先不说watcher,先说医生。医生非常专业,但是术业有专攻,每种病都要有一位主治医师来负责,就像{{}},v-model,v-bind这些疾病都由不同的医生来治疗,你让治疗{{}}的去治疗v-model,就是不成。医生在这边就是一个compiler里的具体对应每一种页面指令的解析方法。
但是我医生就算扁鹊再世,华佗再生,我不知道对应病人的病情变化,我也没有应对之法啊。
助手
所以这时候咱们的watcher就出场了,你可以理解为医生的助手,每一次病情变化,小护士都会通知助手,助手呢,就会告诉医生,医生采取对应措施进行治疗。在vue中,相应对应的就是对dom片段里,值的替换,因为dom对象是引用类型,修改之后,就会反应到页面上。
肯定有人心存疑问,为啥护士不直接告诉医生,医生来进行病情的对比,这不省事多了。个人认为这应该设计到软件设计的单一原则,以及达成解耦,高内聚的功效吧.
万一医生和护士干柴烈火呢
概念总结
- 病人——property
- 护士——getter setter
- 助手——watcher
- 医生——compiler里的每一个对应不同指令的方法
- 病房——data
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。